<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>include::Thymeleaf</title>
</head>
<body>
  <!-- ############## -->
  <!--/* 共用JS与CSS */-->
  <!-- ############## -->
  <th:block th:fragment="scriptcss(title)">
    <title th:if="${!#strings.isEmpty(title)}" th:text="#{${title}} + ' - ' + #{websiteName}"></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="expires" content="0">

    <script type="text/javascript">
      const ctx = '[[@{/}]]';
      const _v = '#buildtime#';
      let _t = Math.round(Math.random() * 1000);
    </script>

    <!-- 全局CSS样式 -->
    <link rel="stylesheet" th:href="@{/css/materialdesignicons.min.css?_t=#buildtime#}">
    <link rel="stylesheet" th:href="@{/css/scrollbar.css?_t=#buildtime#}">
    <link rel="stylesheet" th:href="@{/css/vuetify.min.css?_t=#buildtime#}">
    <link rel="stylesheet" th:href="@{/css/vuetify-theme.css?_t=#buildtime#}">
    <link rel="stylesheet" th:href="@{/css/style.css?_t=#buildtime#}">

    <!-- 全局JS类库 -->
    <script type="text/javascript" th:src="@{/js/lib/screenfull.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/vue.min.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/vuetify.min.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/vue-cookies.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/i18n/vue-i18n.min.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/vuetify-message-snackbar.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/axios.min.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/qs.min.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/vee-validate/vee-validate.full.min.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/jsencrypt.min.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/sockjs.min.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/lib/webstomp.min.js?_t=#buildtime#}"></script>

    <script type="text/javascript" th:src="@{/js/base.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/ajax.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/wsocket.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/common.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/js/framework.js?_t=#buildtime#}"></script>
    <script type="text/javascript" th:src="@{/assets/lang/{lang}.js?_t=#buildtime#(lang=${#locale})}"></script>
  </th:block>

  <!-- ########### -->
  <!--/* 系统页眉 */-->
  <!-- ########### -->
  <th:block th:fragment="header">
    <!-- 切换左侧导航菜单的显示方式 -->
    <v-app-bar-nav-icon @click.stop="toggleSysMenu"></v-app-bar-nav-icon>

    <!-- 模块名称 -->
    <v-subheader class="text-h6 font-weight-bold text-truncate" :class="vdark? 'white--text': 'black--text'">
      <v-btn th:if="${true == back}" icon small depressed :color="vdark? 'white': 'black'" class="mr-2" @click="back">
        <v-icon>mdi-arrow-left</v-icon>
      </v-btn>

      {{$t(menuName)}}
      [[${menuName ?: ''}]]
    </v-subheader>

    <v-spacer></v-spacer>

    <!--/* 语言列表 */-->
    <v-menu open-on-hover offset-y bottom left :close-delay="200" z-index="9">
      <template v-slot:activator="{ on, attrs }">
        <v-btn text v-bind="attrs" v-on="on">
          <v-icon>mdi-translate</v-icon>
          <v-icon>mdi-chevron-down</v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item-group mandatory v-model="lang">
          <v-list-item v-for="item in langList" :value="item.value">
            <v-list-item-content>
              <v-list-item-title>{{item.text}}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-menu>

    <!-- 主题切换按钮 -->
    <v-menu offset-y bottom left transition="slide-y-transition" z-index="8" :nudge-right="30">
      <template v-slot:activator="{ on: menu, attrs }">
        <v-tooltip bottom :open-on-click="false">
          <template v-slot:activator="{ on: tooltip }">
            <v-btn icon small v-bind="attrs" v-on="{ ...tooltip, ...menu }">
              <v-icon>mdi-theme-light-dark</v-icon>
            </v-btn>
          </template>
          <span v-t="'主题切换'"></span>
        </v-tooltip>
      </template>
      <v-list>
        <v-list-item-group v-model="vtheme" mandatory color="primary" @change="switchTheme">
          <v-list-item value="light">
            <v-list-item-icon class="mr-1">
              <v-icon>mdi-white-balance-sunny</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{$t('浅色主题')}}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item value="dark">
            <v-list-item-icon class="mr-1">
              <v-icon>mdi-weather-night</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{$t('深色主题')}}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-menu>

    <!-- 用户头像 -->
    <v-menu open-on-hover bottom offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn large text v-bind="attrs" v-on="on">
          <v-badge dot bordered overlap left :color="socketState == 9? 'green' : 'red'" :value="socketState > 0">
            <v-icon class="mr-1">mdi-account</v-icon>
          </v-badge>
          <shiro:principal property="showName"/>
        </v-btn>
      </template>
      <v-list>
        <v-list-item @click="openUserSetting">
          <v-list-item-content>
            <v-list-item-title v-t="'个人设置'"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item @click="logout">
          <v-list-item-content>
            <v-list-item-title v-t="'注销登录'"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-menu>

    <!-- 全屏切换按钮 -->
    <v-btn icon @click="toggleFullScreen">
      <v-icon>{{fullscreenIcon}}</v-icon>
    </v-btn>
  </th:block>

  <!-- ############## -->
  <!--/* 系统导航菜单 */-->
  <!-- ############## -->
  <th:block th:fragment="navMenu">
    <v-navigation-drawer app dark :mini-variant="sysNavariantStatus" :expand-on-hover="sysNavariantStatus" v-model="sysNavStatus" :mini-variant-width="sysNavariantWidth" class="bg-dark-blue" :class="{'opacity-9':sysNavariantWidth,'bg-nav-light':!vdark}">
      <!-- 系统名称 -->
      <v-list flat class="pa-0">
        <v-list-item>
          <v-list-item-content class="pa-0 mt-4 mb-n1">
            <v-list-item-title class="text-center text-h6 font-weight-bold mb-0">TYFast</v-list-item-title>
            <v-list-item-title class="text-center text-h6 font-weight-bold letter-spacing-25" :title="$t('productName')">{{$t('productName')}}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>

      <!-- 导航菜单 -->
      <v-list nav class="mb-12">
        <template v-for="(item, i) in navMenus">
          <!-- 不含子菜单的 -->
          <v-list-item
              :key="item.menuId"
              :href="item.url"
              :target="item.target"
              active-class="bg-light-blue"
              v-model="item.selected"
              @click="gotoPage(item, $event)"
              v-if="!item.children || item.children.length === 0"
          >
            <v-list-item-icon>
              <v-icon>{{item.icon}}</v-icon>
            </v-list-item-icon>
            <v-list-item-title v-t="item.menuName"/>
          </v-list-item>

          <!-- 含子菜单的 -->
          <v-list-group
              :key="item.menuId"
              :prepend-icon="item.icon"
              no-action
              v-model="item.selected"
              v-else
          >
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>{{$t(item.menuName)}}</v-list-item-title>
              </v-list-item-content>
            </template>

            <v-list-item
                v-for="child in item.children"
                :key="child.menuId"
                :href="child.url"
                :target="child.target"
                v-model="child.selected"
                active-class="bg-light-blue"
                color="white"
                class="mb-0"
                @click="gotoPage(child, $event)"
            >
              <v-list-item-content>
                <v-list-item-title v-t="child.menuName"/>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </template>
      </v-list>
    </v-navigation-drawer>
  </th:block>
</body>
</html>